<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="An enterprise-class UI design language and React-based implementation with a set of high-quality React components, one of best React UI library for enterprises">
    <title>Ant Design - A UI Design Language</title>
    <link rel="icon" href="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="/index-1.css"/>
    <link rel="stylesheet" type="text/css" href="/index-2.css"/>
    <style id="nprogress-style">
      #nprogress { display: none }
    </style>
    <link rel="stylesheet/less" type="text/css" href="/color.less"/>
    <script src="https://gw.alipayobjects.com/os/lib/??es6-shim/0.35.3/es6-sham.min.js,es6-shim/0.35.3/es6-shim.min.js"></script>
    <!--[if lte IE 10]>
    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
    <![endif]-->
    <script>
    if (!window.Intl) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
    }
    </script>
    <script>
    (function() {
      function isLocalStorageNameSupported() {
        var testKey = 'test';
        var storage = window.localStorage;
        try {
          storage.setItem(testKey, '1');
          storage.removeItem(testKey);
          return true;
        } catch (error) {
          return false;
        }
      }
      // 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
      var pathname = location.pathname;

      function isZhCN(pathname) {
        return /-cn\/?$/.test(pathname);
      }
      function getLocalizedPathname(path, zhCN) {
        var pathname = path.startsWith('/') ? path : '/' + path;
        if (!zhCN) { // to enUS
          return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
        } else if (pathname === '/') {
          return '/index-cn';
        } else if (pathname.endsWith('/')) {
          return pathname.replace(/\/$/, '-cn/');
        }
        return pathname + '-cn';
      }

      // 兼容旧的 URL， `?locale=...`
      var queryString = location.search;
      if (queryString) {
        var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
        if (isZhCNConfig && !isZhCN(pathname)) {
          location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
        }
      }

      // 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
      if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
        var lang = (window.localStorage && localStorage.getItem('locale')) || ((navigator.language || navigator.browserLanguage).toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
        // safari is 'zh-cn', while other browser is 'zh-CN';
        if ((lang === 'zh-CN') !== isZhCN(pathname)) {
          location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
        }
      }
      document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
    })()
    </script>
  </head>
  <body>
    <div id="react-content">
      <div class="page-wrapper"><header id="header" class="clearfix"><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a id="logo" href="/index-cn"><img alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"/><img alt="Ant Design" src="https://gw.alipayobjects.com/zos/rmsportal/DkKNubTaaVsKURhcVGkh.svg"/></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div id="search-box"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i><input type="text" placeholder="在 ant.design 中搜索" class="ant-input"/></div><button type="button" class="ant-btn header-lang-button ant-btn-sm ant-btn-background-ghost"><span>English</span></button><div class="ant-select-sm version ant-select ant-select-enabled"><div class="ant-select-selection
            ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0"><div class="ant-select-selection__rendered"><div class="ant-select-selection-selected-value" title="3.10.3" style="display:block;opacity:1">3.10.3</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none" unselectable="on"><i class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div></div><ul class="ant-menu menu-site ant-menu-light ant-menu-root ant-menu-horizontal" id="nav" role="menu"><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="/index-cn"><span>首页</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="/docs/spec/introduce-cn"><span>设计语言</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item ant-menu-item-selected" role="menuitem"><a href="/docs/react/introduce-cn"><span>组件</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="http://pro.ant.design" class="header-link" target="_blank" rel="noopener noreferrer"><span>PRO</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="https://www.yuque.com/ant-design/course" class="header-link" target="_blank" rel="noopener noreferrer">教程<span style="display:inline-block;position:relative;top:-2px;width:6px;margin-left:8px"><span class="ant-badge ant-badge-not-a-wrapper"><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup></span></span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul></div></div></header><div class="main-wrapper"><div class="ant-row"><div class="main-menu ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-6 ant-col-xl-5 ant-col-xxl-4"><ul class="ant-menu aside-container menu-site ant-menu-light ant-menu-root ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/introduce-cn">Ant Design of React</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/getting-started-cn">快速上手</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/practical-projects-cn">项目实战</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/use-with-create-react-app-cn">在 create-react-app 中使用</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/use-in-typescript-cn">在 TypeScript 中使用</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/customize-theme-cn">定制主题</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/changelog-cn">更新日志</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/recommendation-cn">社区精选组件</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/i18n-cn">国际化</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/faq-cn">FAQ</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/contributing-cn">贡献指南</a></li><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true"><h4>Components</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="Components$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="General">General</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/button-cn/"><span>Button</span><span class="chinese">按钮</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/icon-cn/"><span>Icon</span><span class="chinese">图标</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Layout">Layout</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/grid-cn/"><span>Grid</span><span class="chinese">栅格</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/layout-cn/"><span>Layout</span><span class="chinese">布局</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Navigation">Navigation</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/affix-cn/"><span>Affix</span><span class="chinese">固钉</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/breadcrumb-cn/"><span>Breadcrumb</span><span class="chinese">面包屑</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/dropdown-cn/"><span>Dropdown</span><span class="chinese">下拉菜单</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/menu-cn/"><span>Menu</span><span class="chinese">导航菜单</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/pagination-cn/"><span>Pagination</span><span class="chinese">分页</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/steps-cn/"><span>Steps</span><span class="chinese">步骤条</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Data Entry">Data Entry</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/auto-complete-cn/"><span>AutoComplete</span><span class="chinese">自动完成</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/cascader-cn/"><span>Cascader</span><span class="chinese">级联选择</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/checkbox-cn/"><span>Checkbox</span><span class="chinese">多选框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/date-picker-cn/"><span>DatePicker</span><span class="chinese">日期选择框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/form-cn/"><span>Form</span><span class="chinese">表单</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/input-cn/"><span>Input</span><span class="chinese">输入框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/input-number-cn/"><span>InputNumber</span><span class="chinese">数字输入框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/mention-cn/"><span>Mention</span><span class="chinese">提及</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/rate-cn/"><span>Rate</span><span class="chinese">评分</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/radio-cn/"><span>Radio</span><span class="chinese">单选框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/select-cn/"><span>Select</span><span class="chinese">选择器</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/slider-cn/"><span>Slider</span><span class="chinese">滑动输入条</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/switch-cn/"><span>Switch</span><span class="chinese">开关</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tree-select-cn/"><span>TreeSelect</span><span class="chinese">树选择</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/time-picker-cn/"><span>TimePicker</span><span class="chinese">时间选择框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/transfer-cn/"><span>Transfer</span><span class="chinese">穿梭框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/upload-cn/"><span>Upload</span><span class="chinese">上传</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Data Display">Data Display</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/avatar-cn/"><span>Avatar</span><span class="chinese">头像</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/badge-cn/"><span>Badge</span><span class="chinese">徽标数</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/calendar-cn/"><span>Calendar</span><span class="chinese">日历</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/card-cn/"><span>Card</span><span class="chinese">卡片</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/carousel-cn/"><span>Carousel</span><span class="chinese">走马灯</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/collapse-cn/"><span>Collapse</span><span class="chinese">折叠面板</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/list-cn/"><span>List</span><span class="chinese">列表</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/popover-cn/"><span>Popover</span><span class="chinese">气泡卡片</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tooltip-cn/"><span>Tooltip</span><span class="chinese">文字提示</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/table-cn/"><span>Table</span><span class="chinese">表格</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tabs-cn/"><span>Tabs</span><span class="chinese">标签页</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tag-cn/"><span>Tag</span><span class="chinese">标签</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/timeline-cn/"><span>Timeline</span><span class="chinese">时间轴</span></a></li><li class="ant-menu-item ant-menu-item-selected" role="menuitem" style="padding-left:80px"><a href="/components/tree-cn/"><span>Tree</span><span class="chinese">树形控件</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Feedback">Feedback</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/alert-cn/"><span>Alert</span><span class="chinese">警告提示</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/drawer-cn/"><span>Drawer</span><span class="chinese">抽屉</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/modal-cn/"><span>Modal</span><span class="chinese">对话框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/message-cn/"><span>Message</span><span class="chinese">全局提示</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/notification-cn/"><span>Notification</span><span class="chinese">通知提醒框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/progress-cn/"><span>Progress</span><span class="chinese">进度条</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/popconfirm-cn/"><span>Popconfirm</span><span class="chinese">气泡确认框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/spin-cn/"><span>Spin</span><span class="chinese">加载中</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/skeleton-cn/"><span>Skeleton</span><span class="chinese">骨架屏</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Other">Other</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/anchor-cn/"><span>Anchor</span><span class="chinese">锚点</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/back-top-cn/"><span>BackTop</span><span class="chinese">回到顶部</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/divider-cn/"><span>Divider</span><span class="chinese">分割线</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/locale-provider-cn/"><span>LocaleProvider</span><span class="chinese">国际化</span></a></li></ul></li></ul></li></ul></div><div class="main-container main-container-component ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-18 ant-col-xl-19 ant-col-xxl-20"><article><div class="toc-affix"><div class=""><ul id="demo-toc" class="toc"><li title="基本"><a href="#components-tree-demo-basic">基本</a></li><li title="受控操作示例"><a href="#components-tree-demo-basic-controlled">受控操作示例</a></li><li title="拖动示例"><a href="#components-tree-demo-draggable">拖动示例</a></li><li title="异步数据加载"><a href="#components-tree-demo-dynamic">异步数据加载</a></li><li title="可搜索"><a href="#components-tree-demo-search">可搜索</a></li><li title="连接线"><a href="#components-tree-demo-line">连接线</a></li><li title="自定义图标"><a href="#components-tree-demo-customized-icon">自定义图标</a></li><li title="目录"><a href="#components-tree-demo-directory">目录</a></li></ul></div></div><section class="markdown"><h1>Tree<span class="subtitle">树形控件</span><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/tree/index.zh-CN.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></h1><section class="markdown"><h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2><p>文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用<code>树控件</code>可以完整展现其中的层级关系，并具有展开收起选择等交互功能。</p></section><h2><span>代码演示</span><i class="anticon anticon-appstore-o code-box-expand-trigger"><svg viewBox="64 64 896 896" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px"><div style="padding-left:8px;padding-right:8px" class="ant-col-12 code-boxes-col-2-1"><section class="code-box" id="components-tree-demo-basic"><section class="code-box-demo"><ul class="ant-tree ant-tree-icon-hide" role="tree" unselectable="on"><li class="ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="parent 1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">parent 1</span></span><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" role="group"><li class="ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span class="ant-tree-checkbox ant-tree-checkbox-checked ant-tree-checkbox-disabled"><span class="ant-tree-checkbox-inner"></span></span><span title="parent 1-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">parent 1-0</span></span><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" role="group"><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox ant-tree-checkbox-disabled"><span class="ant-tree-checkbox-inner"></span></span><span title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">leaf</span></span></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">leaf</span></span></li></ul></li><li class="ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="parent 1-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">parent 1-1</span></span><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" role="group"><li class="ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title"><span style="color:#1890ff">sss</span></span></span></li></ul></li></ul></li></ul></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-tree-demo-basic">基本</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/tree/demo/basic.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;基本 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Tree <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> TreeNode <span class="token operator">=</span> Tree<span class="token punctuation">.</span>TreeNode<span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  onSelect <span class="token operator">=</span> <span class="token punctuation">(</span>selectedKeys<span class="token punctuation">,</span> info<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'selected'</span><span class="token punctuation">,</span> selectedKeys<span class="token punctuation">,</span> info<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  onCheck <span class="token operator">=</span> <span class="token punctuation">(</span>checkedKeys<span class="token punctuation">,</span> info<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onCheck'</span><span class="token punctuation">,</span> checkedKeys<span class="token punctuation">,</span> info<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Tree</span>
        <span class="token attr-name">checkable</span>
        <span class="token attr-name">defaultExpandedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'0-0-0'</span><span class="token punctuation">,</span> <span class="token string">'0-0-1'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
        <span class="token attr-name">defaultSelectedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'0-0-0'</span><span class="token punctuation">,</span> <span class="token string">'0-0-1'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
        <span class="token attr-name">defaultCheckedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'0-0-0'</span><span class="token punctuation">,</span> <span class="token string">'0-0-1'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
        <span class="token attr-name">onSelect</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onSelect<span class="token punctuation">}</span></span>
        <span class="token attr-name">onCheck</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onCheck<span class="token punctuation">}</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent</span> <span class="token attr-name">1"</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent</span> <span class="token attr-name">1-0"</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-0<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>leaf<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-0-0<span class="token punctuation">"</span></span> <span class="token attr-name">disableCheckbox</span> <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>leaf<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-0-1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TreeNode</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent</span> <span class="token attr-name">1-1"</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">&lt;</span>span style<span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> color<span class="token punctuation">:</span> <span class="token string">'#1890ff'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>sss<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span> key<span class="token operator">=</span><span class="token string">"0-0-1-0"</span> <span class="token operator">/</span><span class="token operator">></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TreeNode</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TreeNode</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Tree</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-tree-demo-draggable"><section class="code-box-demo"><ul class="ant-tree ant-tree-icon-hide draggable-tree" role="tree" unselectable="on"><li class="ant-tree-treenode-switcher-open" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span title="0-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open draggable" draggable="true" aria-grabbed="true"><span class="ant-tree-title">0-0</span></span><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" role="group"><li class="ant-tree-treenode-switcher-open" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span title="0-0-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open draggable" draggable="true" aria-grabbed="true"><span class="ant-tree-title">0-0-0</span></span><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" role="group"><li class="ant-tree-treenode-switcher-open" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="0-0-0-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable" draggable="true" aria-grabbed="true"><span class="ant-tree-title">0-0-0-0</span></span></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="0-0-0-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable" draggable="true" aria-grabbed="true"><span class="ant-tree-title">0-0-0-1</span></span></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="0-0-0-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable" draggable="true" aria-grabbed="true"><span class="ant-tree-title">0-0-0-2</span></span></li></ul></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_close"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span title="0-0-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close draggable" draggable="true" aria-grabbed="true"><span class="ant-tree-title">0-0-1</span></span></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="0-0-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable" draggable="true" aria-grabbed="true"><span class="ant-tree-title">0-0-2</span></span></li></ul></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_close"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span title="0-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close draggable" draggable="true" aria-grabbed="true"><span class="ant-tree-title">0-1</span></span></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="0-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable" draggable="true" aria-grabbed="true"><span class="ant-tree-title">0-2</span></span></li></ul><style>/* You can add the following CSS to your project to make draggable area bigger */
#components-tree-demo-draggable .draggable-tree .ant-tree-node-content-wrapper {
  width: calc(100% - 18px);
}</style></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-tree-demo-draggable">拖动示例</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/tree/demo/draggable.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>将节点拖拽到其他节点内部或前后。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;拖动示例 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n/* You can add the following CSS to your project to make draggable area bigger */\n.draggable-tree .ant-tree-node-content-wrapper {\n  width: calc(100% - 18px);\n}&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESAD0AKgAEATVIBXZxjTlnaFhZnWgALGGcwUigoUgB3A1xnAGEAZRTg0mcAT09-ZxR-UiIYDFoM5xU0LHCWfjxcNAAjWH95Z0aIXHw8x3sAHXICWvqm2AVaQXCCX1pxyYVyUjYFa3pGBVi6lA484AHnZ3iWUMRvNCgMAAoARgAGW4BSZwVna4AOFCMASgBuAe0QNp9IYYCYSMxVrZ1AMICoUKR-GUAEpCUoRQoqZwAcnkpSxf3IsPhiOcKOEABEAPIAWXRqmxuNmyhU-JhcIRZSxMxY9hYECk9m5pnMrMJ7JJWII9gMxmFcFF-wOSuVgOBspCtBUUAhdChogAPHyAG7OCAsAC8fSsdDQBhg_CtzikWVglpA6ECCVOACYACyfK0APn1vIgRsDA31cAw_AgKFoEb8ziNaDyKk8jAAcktwubnMoMB4VLYCPhaABRWDFxgAISyAEkWJcsatbeR7VjfpH7NHY_HA4DdEA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Tree <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> TreeNode <span class="token operator">=</span> Tree<span class="token punctuation">.</span>TreeNode<span class="token punctuation">;</span>

<span class="token keyword">const</span> x <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> y <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> z <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> gData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> generateData <span class="token operator">=</span> <span class="token punctuation">(</span>_level<span class="token punctuation">,</span> _preKey<span class="token punctuation">,</span> _tns<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> preKey <span class="token operator">=</span> _preKey <span class="token operator">||</span> <span class="token string">'0'</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> tns <span class="token operator">=</span> _tns <span class="token operator">||</span> gData<span class="token punctuation">;</span>

  <span class="token keyword">const</span> children <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> x<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>preKey<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
    tns<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> key<span class="token punctuation">,</span> key <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">&lt;</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>_level <span class="token operator">&lt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> tns<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">const</span> level <span class="token operator">=</span> _level <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span>
  children<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    tns<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>children <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token function">generateData</span><span class="token punctuation">(</span>level<span class="token punctuation">,</span> key<span class="token punctuation">,</span> tns<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">generateData</span><span class="token punctuation">(</span>z<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    gData<span class="token punctuation">,</span>
    expandedKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'0-0'</span><span class="token punctuation">,</span> <span class="token string">'0-0-0'</span><span class="token punctuation">,</span> <span class="token string">'0-0-0-0'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>

  onDragEnter <span class="token operator">=</span> <span class="token punctuation">(</span>info<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>info<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment" spellcheck="true">// expandedKeys 需要受控时设置</span>
    <span class="token comment" spellcheck="true">// this.setState({</span>
    <span class="token comment" spellcheck="true">//   expandedKeys: info.expandedKeys,</span>
    <span class="token comment" spellcheck="true">// });</span>
  <span class="token punctuation">}</span>

  onDrop <span class="token operator">=</span> <span class="token punctuation">(</span>info<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>info<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> dropKey <span class="token operator">=</span> info<span class="token punctuation">.</span>node<span class="token punctuation">.</span>props<span class="token punctuation">.</span>eventKey<span class="token punctuation">;</span>
    <span class="token keyword">const</span> dragKey <span class="token operator">=</span> info<span class="token punctuation">.</span>dragNode<span class="token punctuation">.</span>props<span class="token punctuation">.</span>eventKey<span class="token punctuation">;</span>
    <span class="token keyword">const</span> dropPos <span class="token operator">=</span> info<span class="token punctuation">.</span>node<span class="token punctuation">.</span>props<span class="token punctuation">.</span>pos<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'-'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> dropPosition <span class="token operator">=</span> info<span class="token punctuation">.</span>dropPosition <span class="token operator">-</span> <span class="token function">Number</span><span class="token punctuation">(</span>dropPos<span class="token punctuation">[</span>dropPos<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> loop <span class="token operator">=</span> <span class="token punctuation">(</span>data<span class="token punctuation">,</span> key<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      data<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">,</span> arr<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>key <span class="token operator">===</span> key<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> <span class="token function">callback</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">,</span> arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> <span class="token function">loop</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">,</span> key<span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>gData<span class="token punctuation">]</span><span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">// Find dragObject</span>
    <span class="token keyword">let</span> dragObj<span class="token punctuation">;</span>
    <span class="token function">loop</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> dragKey<span class="token punctuation">,</span> <span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">,</span> arr<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      dragObj <span class="token operator">=</span> item<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>info<span class="token punctuation">.</span>dropToGap<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment" spellcheck="true">// Drop on the content</span>
      <span class="token function">loop</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> dropKey<span class="token punctuation">,</span> <span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        item<span class="token punctuation">.</span>children <span class="token operator">=</span> item<span class="token punctuation">.</span>children <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token comment" spellcheck="true">// where to insert 示例添加到尾部，可以是随意位置</span>
        item<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>dragObj<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>
      <span class="token punctuation">(</span>info<span class="token punctuation">.</span>node<span class="token punctuation">.</span>props<span class="token punctuation">.</span>children <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span> <span class="token comment" spellcheck="true">// Has children</span>
      <span class="token operator">&amp;&amp;</span> info<span class="token punctuation">.</span>node<span class="token punctuation">.</span>props<span class="token punctuation">.</span>expanded <span class="token comment" spellcheck="true">// Is expanded</span>
      <span class="token operator">&amp;&amp;</span> dropPosition <span class="token operator">===</span> <span class="token number">1</span> <span class="token comment" spellcheck="true">// On the bottom gap</span>
    <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">loop</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> dropKey<span class="token punctuation">,</span> <span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        item<span class="token punctuation">.</span>children <span class="token operator">=</span> item<span class="token punctuation">.</span>children <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token comment" spellcheck="true">// where to insert 示例添加到尾部，可以是随意位置</span>
        item<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>dragObj<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token keyword">let</span> ar<span class="token punctuation">;</span>
      <span class="token keyword">let</span> i<span class="token punctuation">;</span>
      <span class="token function">loop</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> dropKey<span class="token punctuation">,</span> <span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">,</span> arr<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        ar <span class="token operator">=</span> arr<span class="token punctuation">;</span>
        i <span class="token operator">=</span> index<span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>dropPosition <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        ar<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> dragObj<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        ar<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> dragObj<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      gData<span class="token punctuation">:</span> data<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> loop <span class="token operator">=</span> data <span class="token operator">=</span><span class="token operator">></span> data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>children <span class="token operator">&amp;&amp;</span> item<span class="token punctuation">.</span>children<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">loop</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TreeNode</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Tree</span>
        <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>draggable-tree<span class="token punctuation">"</span></span>
        <span class="token attr-name">defaultExpandedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>expandedKeys<span class="token punctuation">}</span></span>
        <span class="token attr-name">draggable</span>
        <span class="token attr-name">onDragEnter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onDragEnter<span class="token punctuation">}</span></span>
        <span class="token attr-name">onDrop</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onDrop<span class="token punctuation">}</span></span>
      <span class="token punctuation">></span></span>
        <span class="token punctuation">{</span><span class="token function">loop</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>gData<span class="token punctuation">)</span><span class="token punctuation">}</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Tree</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight"><pre><code class="css"><span class="token comment" spellcheck="true">/* You can add the following CSS to your project to make draggable area bigger */</span>
<span class="token selector"><span class="token id">#components-tree-demo-draggable</span> <span class="token class">.draggable-tree</span> <span class="token class">.ant-tree-node-content-wrapper</span> </span><span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token number">100%</span> - <span class="token number">18</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-tree-demo-search"><section class="code-box-demo"><div><span class="ant-input-search ant-input-affix-wrapper" style="margin-bottom:8px"><input type="text" placeholder="Search" class="ant-input"/><span class="ant-input-suffix"><i class="anticon anticon-search ant-input-search-icon"><svg viewBox="64 64 896 896" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></span></span><ul class="ant-tree ant-tree-icon-hide" role="tree" unselectable="on"><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_close"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><span class="ant-tree-title"><span><span style="color:#f50"></span>0-0</span></span></span></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_close"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><span class="ant-tree-title"><span><span style="color:#f50"></span>0-1</span></span></span></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title"><span><span style="color:#f50"></span>0-2</span></span></span></li></ul></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-tree-demo-search">可搜索</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/tree/demo/search.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>可搜索的树。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;可搜索 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Tree<span class="token punctuation">,</span> Input <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> TreeNode <span class="token operator">=</span> Tree<span class="token punctuation">.</span>TreeNode<span class="token punctuation">;</span>
<span class="token keyword">const</span> Search <span class="token operator">=</span> Input<span class="token punctuation">.</span>Search<span class="token punctuation">;</span>

<span class="token keyword">const</span> x <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> y <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> z <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> gData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> generateData <span class="token operator">=</span> <span class="token punctuation">(</span>_level<span class="token punctuation">,</span> _preKey<span class="token punctuation">,</span> _tns<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> preKey <span class="token operator">=</span> _preKey <span class="token operator">||</span> <span class="token string">'0'</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> tns <span class="token operator">=</span> _tns <span class="token operator">||</span> gData<span class="token punctuation">;</span>

  <span class="token keyword">const</span> children <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> x<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>preKey<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
    tns<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> key<span class="token punctuation">,</span> key <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">&lt;</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>_level <span class="token operator">&lt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> tns<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">const</span> level <span class="token operator">=</span> _level <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span>
  children<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    tns<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>children <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token function">generateData</span><span class="token punctuation">(</span>level<span class="token punctuation">,</span> key<span class="token punctuation">,</span> tns<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">generateData</span><span class="token punctuation">(</span>z<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> dataList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> generateList <span class="token operator">=</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> data<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> node <span class="token operator">=</span> data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> key <span class="token operator">=</span> node<span class="token punctuation">.</span>key<span class="token punctuation">;</span>
    dataList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> key<span class="token punctuation">,</span> title<span class="token punctuation">:</span> key <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">generateList</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">,</span> node<span class="token punctuation">.</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">generateList</span><span class="token punctuation">(</span>gData<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> getParentKey <span class="token operator">=</span> <span class="token punctuation">(</span>key<span class="token punctuation">,</span> tree<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> parentKey<span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> tree<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> node <span class="token operator">=</span> tree<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>item <span class="token operator">=</span><span class="token operator">></span> item<span class="token punctuation">.</span>key <span class="token operator">===</span> key<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        parentKey <span class="token operator">=</span> node<span class="token punctuation">.</span>key<span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">getParentKey</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> node<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        parentKey <span class="token operator">=</span> <span class="token function">getParentKey</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> node<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> parentKey<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">SearchTree</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    expandedKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    searchValue<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    autoExpandParent<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>

  onExpand <span class="token operator">=</span> <span class="token punctuation">(</span>expandedKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      expandedKeys<span class="token punctuation">,</span>
      autoExpandParent<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  onChange <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> value <span class="token operator">=</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
    <span class="token keyword">const</span> expandedKeys <span class="token operator">=</span> dataList<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>title<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">getParentKey</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>key<span class="token punctuation">,</span> gData<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> i<span class="token punctuation">,</span> self<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> item <span class="token operator">&amp;&amp;</span> self<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">===</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      expandedKeys<span class="token punctuation">,</span>
      searchValue<span class="token punctuation">:</span> value<span class="token punctuation">,</span>
      autoExpandParent<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> searchValue<span class="token punctuation">,</span> expandedKeys<span class="token punctuation">,</span> autoExpandParent <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
    <span class="token keyword">const</span> loop <span class="token operator">=</span> data <span class="token operator">=</span><span class="token operator">></span> data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> index <span class="token operator">=</span> item<span class="token punctuation">.</span>title<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>searchValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> beforeStr <span class="token operator">=</span> item<span class="token punctuation">.</span>title<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> index<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> afterStr <span class="token operator">=</span> item<span class="token punctuation">.</span>title<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span>index <span class="token operator">+</span> searchValue<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> title <span class="token operator">=</span> index <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">?</span> <span class="token punctuation">(</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
          <span class="token punctuation">{</span>beforeStr<span class="token punctuation">}</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> color<span class="token punctuation">:</span> <span class="token string">'#f50'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>searchValue<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
          <span class="token punctuation">{</span>afterStr<span class="token punctuation">}</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
      <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>title<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
            <span class="token punctuation">{</span><span class="token function">loop</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">}</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TreeNode</span><span class="token punctuation">></span></span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>title<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Search</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginBottom<span class="token punctuation">:</span> <span class="token number">8</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Search<span class="token punctuation">"</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Tree</span>
          <span class="token attr-name">onExpand</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onExpand<span class="token punctuation">}</span></span>
          <span class="token attr-name">expandedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>expandedKeys<span class="token punctuation">}</span></span>
          <span class="token attr-name">autoExpandParent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>autoExpandParent<span class="token punctuation">}</span></span>
        <span class="token punctuation">></span></span>
          <span class="token punctuation">{</span><span class="token function">loop</span><span class="token punctuation">(</span>gData<span class="token punctuation">)</span><span class="token punctuation">}</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Tree</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SearchTree</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-tree-demo-customized-icon"><section class="code-box-demo"><ul class="ant-tree" role="tree" unselectable="on"><li class="ant-tree-treenode-switcher-open" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span title="parent 1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-smile-o"><svg viewBox="64 64 896 896" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span><span class="ant-tree-title">parent 1</span></span><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" role="group"><li class="ant-tree-treenode-switcher-open ant-tree-treenode-selected" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal ant-tree-node-selected"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-meh-o"><svg viewBox="64 64 896 896" class="" data-icon="meh" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 565H360c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h304c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"></path></svg></i></span><span class="ant-tree-title">leaf</span></span></li><li class="ant-tree-treenode-switcher-open" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-frown-o"><svg viewBox="64 64 896 896" class="" data-icon="frown" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM512 533c-85.5 0-155.6 67.3-160 151.6a8 8 0 0 0 8 8.4h48.1c4.2 0 7.8-3.2 8.1-7.4C420 636.1 461.5 597 512 597s92.1 39.1 95.8 88.6c.3 4.2 3.9 7.4 8.1 7.4H664a8 8 0 0 0 8-8.4C667.6 600.3 597.5 533 512 533z"></path></svg></i></span><span class="ant-tree-title">leaf</span></span></li></ul></li></ul></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-tree-demo-customized-icon">自定义图标</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/tree/demo/customized-icon.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>可以针对不同的节点定制图标。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;自定义图标 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Tree<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> TreeNode <span class="token operator">=</span> Tree<span class="token punctuation">.</span>TreeNode<span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Tree</span>
        <span class="token attr-name">showIcon</span>
        <span class="token attr-name">defaultExpandAll</span>
        <span class="token attr-name">defaultSelectedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'0-0-0'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">icon={&lt;Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>smile-o<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span> title<span class="token operator">=</span><span class="token string">"parent 1"</span> key<span class="token operator">=</span><span class="token string">"0-0"</span><span class="token operator">></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">icon={&lt;Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>meh-o<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span> title<span class="token operator">=</span><span class="token string">"leaf"</span> key<span class="token operator">=</span><span class="token string">"0-0-0"</span> <span class="token operator">/</span><span class="token operator">></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span>
            <span class="token attr-name">icon</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selected <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
              <span class="token operator">&lt;</span>Icon type<span class="token punctuation">=</span><span class="token punctuation">{</span>selected <span class="token operator">?</span> <span class="token string">'frown'</span> <span class="token punctuation">:</span> <span class="token string">'frown-o'</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
            <span class="token punctuation">)</span><span class="token punctuation">}</span>
            title<span class="token operator">=</span><span class="token string">"leaf"</span>
            key<span class="token operator">=</span><span class="token string">"0-0-1"</span>
          <span class="token operator">/</span><span class="token operator">></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TreeNode</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Tree</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section></div><div style="padding-left:8px;padding-right:8px" class="ant-col-12 code-boxes-col-2-1"><section class="code-box" id="components-tree-demo-basic-controlled"><section class="code-box-demo"><ul class="ant-tree ant-tree-icon-hide" role="tree" unselectable="on"><li class="ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-indeterminate" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span class="ant-tree-checkbox ant-tree-checkbox-indeterminate"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">0-0</span></span><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" role="group"><li class="ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">0-0-0</span></span><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" role="group"><li class="ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-0-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-0-0</span></span></li><li class="ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-0-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-0-1</span></span></li><li class="ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-0-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-0-2</span></span></li></ul></li><li class="ant-tree-treenode-switcher-open" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">0-0-1</span></span><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" role="group"><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-1-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-1-0</span></span></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-1-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-1-1</span></span></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-1-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-1-2</span></span></li></ul></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-2</span></span></li></ul></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_close"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><span class="ant-tree-title">0-1</span></span></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-2</span></span></li></ul></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-tree-demo-basic-controlled">受控操作示例</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/tree/demo/basic-controlled.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>受控操作示例</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;受控操作示例 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Tree <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> TreeNode <span class="token operator">=</span> Tree<span class="token punctuation">.</span>TreeNode<span class="token punctuation">;</span>

<span class="token keyword">const</span> treeData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'0-0'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'0-0'</span><span class="token punctuation">,</span>
  children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'0-0-0'</span><span class="token punctuation">,</span>
    key<span class="token punctuation">:</span> <span class="token string">'0-0-0'</span><span class="token punctuation">,</span>
    children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'0-0-0-0'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'0-0-0-0'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'0-0-0-1'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'0-0-0-1'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'0-0-0-2'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'0-0-0-2'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'0-0-1'</span><span class="token punctuation">,</span>
    key<span class="token punctuation">:</span> <span class="token string">'0-0-1'</span><span class="token punctuation">,</span>
    children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'0-0-1-0'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'0-0-1-0'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'0-0-1-1'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'0-0-1-1'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'0-0-1-2'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'0-0-1-2'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'0-0-2'</span><span class="token punctuation">,</span>
    key<span class="token punctuation">:</span> <span class="token string">'0-0-2'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'0-1'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'0-1'</span><span class="token punctuation">,</span>
  children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'0-1-0-0'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'0-1-0-0'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'0-1-0-1'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'0-1-0-1'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'0-1-0-2'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'0-1-0-2'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'0-2'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'0-2'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    expandedKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'0-0-0'</span><span class="token punctuation">,</span> <span class="token string">'0-0-1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    autoExpandParent<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    checkedKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'0-0-0'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    selectedKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>

  onExpand <span class="token operator">=</span> <span class="token punctuation">(</span>expandedKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onExpand'</span><span class="token punctuation">,</span> expandedKeys<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment" spellcheck="true">// if not set autoExpandParent to false, if children expanded, parent can not collapse.</span>
    <span class="token comment" spellcheck="true">// or, you can remove all expanded children keys.</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      expandedKeys<span class="token punctuation">,</span>
      autoExpandParent<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  onCheck <span class="token operator">=</span> <span class="token punctuation">(</span>checkedKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onCheck'</span><span class="token punctuation">,</span> checkedKeys<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> checkedKeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  onSelect <span class="token operator">=</span> <span class="token punctuation">(</span>selectedKeys<span class="token punctuation">,</span> info<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onSelect'</span><span class="token punctuation">,</span> info<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selectedKeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  renderTreeNodes <span class="token operator">=</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span> <span class="token attr-name">dataRef</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderTreeNodes</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">}</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TreeNode</span><span class="token punctuation">></span></span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span> <span class="token operator">&lt;</span>TreeNode <span class="token punctuation">{</span><span class="token operator">...</span>item<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Tree</span>
        <span class="token attr-name">checkable</span>
        <span class="token attr-name">onExpand</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onExpand<span class="token punctuation">}</span></span>
        <span class="token attr-name">expandedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>expandedKeys<span class="token punctuation">}</span></span>
        <span class="token attr-name">autoExpandParent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>autoExpandParent<span class="token punctuation">}</span></span>
        <span class="token attr-name">onCheck</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onCheck<span class="token punctuation">}</span></span>
        <span class="token attr-name">checkedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>checkedKeys<span class="token punctuation">}</span></span>
        <span class="token attr-name">onSelect</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onSelect<span class="token punctuation">}</span></span>
        <span class="token attr-name">selectedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selectedKeys<span class="token punctuation">}</span></span>
      <span class="token punctuation">></span></span>
        <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderTreeNodes</span><span class="token punctuation">(</span>treeData<span class="token punctuation">)</span><span class="token punctuation">}</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Tree</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-tree-demo-dynamic"><section class="code-box-demo"><ul class="ant-tree ant-tree-icon-hide" role="tree" unselectable="on"><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_close"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span title="Expand to load" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><span class="ant-tree-title">Expand to load</span></span></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_close"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span title="Expand to load" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><span class="ant-tree-title">Expand to load</span></span></li><li class="" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="Tree Node" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">Tree Node</span></span></li></ul></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-tree-demo-dynamic">异步数据加载</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/tree/demo/dynamic.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>点击展开节点，动态加载数据。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;异步数据加载 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Tree <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> TreeNode <span class="token operator">=</span> Tree<span class="token punctuation">.</span>TreeNode<span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    treeData<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Expand to load'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'0'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Expand to load'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'1'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Tree Node'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span> isLeaf<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>

  onLoadData <span class="token operator">=</span> <span class="token punctuation">(</span>treeNode<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>treeNode<span class="token punctuation">.</span>props<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        treeNode<span class="token punctuation">.</span>props<span class="token punctuation">.</span>dataRef<span class="token punctuation">.</span>children <span class="token operator">=</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Child Node'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>treeNode<span class="token punctuation">.</span>props<span class="token punctuation">.</span>eventKey<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-0`</span></span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Child Node'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>treeNode<span class="token punctuation">.</span>props<span class="token punctuation">.</span>eventKey<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-1`</span></span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          treeData<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>treeData<span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  renderTreeNodes <span class="token operator">=</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span> <span class="token attr-name">dataRef</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderTreeNodes</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">}</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TreeNode</span><span class="token punctuation">></span></span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span> <span class="token operator">&lt;</span>TreeNode <span class="token punctuation">{</span><span class="token operator">...</span>item<span class="token punctuation">}</span> dataRef<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Tree</span> <span class="token attr-name">loadData</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onLoadData<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
        <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderTreeNodes</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>treeData<span class="token punctuation">)</span><span class="token punctuation">}</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Tree</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-tree-demo-line"><section class="code-box-demo"><ul class="ant-tree ant-tree-icon-hide ant-tree-show-line" role="tree" unselectable="on"><li class="ant-tree-treenode-switcher-open" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="anticon anticon-minus-square ant-tree-switcher-line-icon"><svg viewBox="64 64 896 896" class="" data-icon="minus-square" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"></path></svg></i></span><span title="parent 1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">parent 1</span></span><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" role="group"><li class="ant-tree-treenode-switcher-open" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="anticon anticon-minus-square ant-tree-switcher-line-icon"><svg viewBox="64 64 896 896" class="" data-icon="minus-square" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"></path></svg></i></span><span title="parent 1-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">parent 1-0</span></span><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" role="group"><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"><i class="anticon anticon-file ant-tree-switcher-line-icon"><svg viewBox="64 64 896 896" class="" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></span><span title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">leaf</span></span></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"><i class="anticon anticon-file ant-tree-switcher-line-icon"><svg viewBox="64 64 896 896" class="" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></span><span title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">leaf</span></span></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"><i class="anticon anticon-file ant-tree-switcher-line-icon"><svg viewBox="64 64 896 896" class="" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></span><span title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">leaf</span></span></li></ul></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_close"><i class="anticon anticon-plus-square ant-tree-switcher-line-icon"><svg viewBox="64 64 896 896" class="" data-icon="plus-square" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"></path></svg></i></span><span title="parent 1-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><span class="ant-tree-title">parent 1-1</span></span></li><li class="ant-tree-treenode-switcher-close" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_close"><i class="anticon anticon-plus-square ant-tree-switcher-line-icon"><svg viewBox="64 64 896 896" class="" data-icon="plus-square" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"></path></svg></i></span><span title="parent 1-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><span class="ant-tree-title">parent 1-2</span></span></li></ul></li></ul></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-tree-demo-line">连接线</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/tree/demo/line.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>带连接线的树。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;连接线 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Tree <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> TreeNode <span class="token operator">=</span> Tree<span class="token punctuation">.</span>TreeNode<span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  onSelect <span class="token operator">=</span> <span class="token punctuation">(</span>selectedKeys<span class="token punctuation">,</span> info<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'selected'</span><span class="token punctuation">,</span> selectedKeys<span class="token punctuation">,</span> info<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Tree</span>
        <span class="token attr-name">showLine</span>
        <span class="token attr-name">defaultExpandedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'0-0-0'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
        <span class="token attr-name">onSelect</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onSelect<span class="token punctuation">}</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent</span> <span class="token attr-name">1"</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent</span> <span class="token attr-name">1-0"</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>leaf<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-0-0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>leaf<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-0-1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>leaf<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-0-2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TreeNode</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent</span> <span class="token attr-name">1-1"</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>leaf<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-1-0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TreeNode</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent</span> <span class="token attr-name">1-2"</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>leaf<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-2-0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>leaf<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-2-1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TreeNode</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TreeNode</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Tree</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-tree-demo-directory"><section class="code-box-demo"><ul class="ant-tree ant-tree-directory" role="tree" unselectable="on"><li class="ant-tree-treenode-switcher-open" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span title="parent 0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-folder-open"><svg viewBox="64 64 896 896" class="" data-icon="folder-open" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 0 0-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zM136 256h188.5l119.6 114.4H748V444H238c-13 0-24.8 7.9-29.7 20L136 643.2V256zm635.3 512H159l103.3-256h612.4L771.3 768z"></path></svg></i></span><span class="ant-tree-title">parent 0</span></span><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" role="group"><li class="" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="leaf 0-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-file"><svg viewBox="64 64 896 896" class="" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></span><span class="ant-tree-title">leaf 0-0</span></span></li><li class="" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="leaf 0-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-file"><svg viewBox="64 64 896 896" class="" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></span><span class="ant-tree-title">leaf 0-1</span></span></li></ul></li><li class="ant-tree-treenode-switcher-open" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span title="parent 1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-folder-open"><svg viewBox="64 64 896 896" class="" data-icon="folder-open" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 0 0-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zM136 256h188.5l119.6 114.4H748V444H238c-13 0-24.8 7.9-29.7 20L136 643.2V256zm635.3 512H159l103.3-256h612.4L771.3 768z"></path></svg></i></span><span class="ant-tree-title">parent 1</span></span><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" role="group"><li class="" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="leaf 1-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-file"><svg viewBox="64 64 896 896" class="" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></span><span class="ant-tree-title">leaf 1-0</span></span></li><li class="" role="treeitem"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="leaf 1-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-file"><svg viewBox="64 64 896 896" class="" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></span><span class="ant-tree-title">leaf 1-1</span></span></li></ul></li></ul></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-tree-demo-directory">目录</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/tree/demo/directory.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>内置的目录树，<code>multiple</code> 模式支持 <code>ctrl(Windows)</code> / <code>command(Mac)</code> 复选。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;目录 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Tree <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> DirectoryTree <span class="token operator">=</span> Tree<span class="token punctuation">.</span>DirectoryTree<span class="token punctuation">;</span>
<span class="token keyword">const</span> TreeNode <span class="token operator">=</span> Tree<span class="token punctuation">.</span>TreeNode<span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  onSelect <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Trigger Select'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  onExpand <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Trigger Expand'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DirectoryTree</span>
        <span class="token attr-name">multiple</span>
        <span class="token attr-name">defaultExpandAll</span>
        <span class="token attr-name">onSelect</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onSelect<span class="token punctuation">}</span></span>
        <span class="token attr-name">onExpand</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onExpand<span class="token punctuation">}</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent</span> <span class="token attr-name">0"</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>leaf</span> <span class="token attr-name">0-0"</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-0<span class="token punctuation">"</span></span> <span class="token attr-name">isLeaf</span> <span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>leaf</span> <span class="token attr-name">0-1"</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-1<span class="token punctuation">"</span></span> <span class="token attr-name">isLeaf</span> <span class="token punctuation">/></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TreeNode</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent</span> <span class="token attr-name">1"</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>leaf</span> <span class="token attr-name">1-0"</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-1-0<span class="token punctuation">"</span></span> <span class="token attr-name">isLeaf</span> <span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>leaf</span> <span class="token attr-name">1-1"</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-1-1<span class="token punctuation">"</span></span> <span class="token attr-name">isLeaf</span> <span class="token punctuation">/></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TreeNode</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DirectoryTree</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section></div></div><section class="markdown api-container"><h2 id="API"><span>API</span><a href="#API" class="anchor">#</a></h2><h3 id="Tree-props"><span>Tree props</span><a href="#Tree-props" class="anchor">#</a></h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>autoExpandParent</td><td>是否自动展开父节点</td><td>boolean</td><td>true</td></tr><tr><td>checkable</td><td>节点前添加 Checkbox 复选框</td><td>boolean</td><td>false</td></tr><tr><td>checkedKeys</td><td>（受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点key，则子节点自动选中；相应当子节点key都传入，父节点也自动选中。当设置<code>checkable</code>和<code>checkStrictly</code>，它是一个有<code>checked</code>和<code>halfChecked</code>属性的对象，并且父子节点的选中与否不再关联</td><td>string<!-- -->[<!-- -->] <!-- -->|<!-- --> {checked: string<!-- -->[<!-- -->], halfChecked: string<!-- -->[<!-- -->]}</td><td>[<!-- -->]</td></tr><tr><td>checkStrictly</td><td>checkable状态下节点选择完全受控（父子节点选中状态不再关联）</td><td>boolean</td><td>false</td></tr><tr><td>defaultCheckedKeys</td><td>默认选中复选框的树节点</td><td>string<!-- -->[<!-- -->]</td><td>[<!-- -->]</td></tr><tr><td>defaultExpandAll</td><td>默认展开所有树节点</td><td>boolean</td><td>false</td></tr><tr><td>defaultExpandedKeys</td><td>默认展开指定的树节点</td><td>string<!-- -->[<!-- -->]</td><td>[<!-- -->]</td></tr><tr><td>defaultExpandParent</td><td>默认展开父节点</td><td>bool</td><td>true</td></tr><tr><td>defaultSelectedKeys</td><td>默认选中的树节点</td><td>string<!-- -->[<!-- -->]</td><td>[<!-- -->]</td></tr><tr><td>disabled</td><td>将树禁用</td><td>bool</td><td>false</td></tr><tr><td>draggable</td><td>设置节点可拖拽（IE&gt;8）</td><td>boolean</td><td>false</td></tr><tr><td>expandedKeys</td><td>（受控）展开指定的树节点</td><td>string<!-- -->[<!-- -->]</td><td>[<!-- -->]</td></tr><tr><td>filterTreeNode</td><td>按需筛选树节点（高亮），返回true</td><td>function(node)</td><td>-</td></tr><tr><td>loadData</td><td>异步加载数据</td><td>function(node)</td><td>-</td></tr><tr><td>loadedKeys</td><td>（受控）已经加载的节点，需要配合 <code>loadData</code> 使用</td><td>string<!-- -->[<!-- -->]</td><td>[<!-- -->]</td></tr><tr><td>multiple</td><td>支持点选多个节点（节点本身）</td><td>boolean</td><td>false</td></tr><tr><td>selectedKeys</td><td>（受控）设置选中的树节点</td><td>string<!-- -->[<!-- -->]</td><td>-</td></tr><tr><td>showIcon</td><td>是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式</td><td>boolean</td><td>false</td></tr><tr><td>showLine</td><td>是否展示连接线</td><td>boolean</td><td>false</td></tr><tr><td>onCheck</td><td>点击复选框触发</td><td>function(checkedKeys, e:{checked: bool, checkedNodes, node, event})</td><td>-</td></tr><tr><td>onDragEnd</td><td>dragend 触发时调用</td><td>function({event, node})</td><td>-</td></tr><tr><td>onDragEnter</td><td>dragenter 触发时调用</td><td>function({event, node, expandedKeys})</td><td>-</td></tr><tr><td>onDragLeave</td><td>dragleave 触发时调用</td><td>function({event, node})</td><td>-</td></tr><tr><td>onDragOver</td><td>dragover 触发时调用</td><td>function({event, node})</td><td>-</td></tr><tr><td>onDragStart</td><td>开始拖拽时调用</td><td>function({event, node})</td><td>-</td></tr><tr><td>onDrop</td><td>drop 触发时调用</td><td>function({event, node, dragNode, dragNodesKeys})</td><td>-</td></tr><tr><td>onExpand</td><td>展开/收起节点时触发</td><td>function(expandedKeys, {expanded: bool, node})</td><td>-</td></tr><tr><td>onLoad</td><td>节点加载完毕时触发</td><td>function(loadedKeys, {event, node})</td><td>-</td></tr><tr><td>onRightClick</td><td>响应右键点击</td><td>function({event, node})</td><td>-</td></tr><tr><td>onSelect</td><td>点击树节点触发</td><td>function(selectedKeys, e:{selected: bool, selectedNodes, node, event})</td><td>-</td></tr></tbody></table><h3 id="TreeNode-props"><span>TreeNode props</span><a href="#TreeNode-props" class="anchor">#</a></h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>disableCheckbox</td><td>禁掉 checkbox</td><td>boolean</td><td>false</td></tr><tr><td>disabled</td><td>禁掉响应</td><td>boolean</td><td>false</td></tr><tr><td>icon</td><td>自定义图标。可接收组件，props 为当前节点 props</td><td>ReactNode/Function(props):ReactNode</td><td>-</td></tr><tr><td>isLeaf</td><td>设置为叶子节点(设置了<code>loadData</code>时有效)</td><td>boolean</td><td>false</td></tr><tr><td>key</td><td>被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！</td><td>string</td><td>内部计算出的节点位置</td></tr><tr><td>selectable</td><td>设置节点是否可被选中</td><td>boolean</td><td>true</td></tr><tr><td>title</td><td>标题</td><td>string<!-- -->|<!-- -->ReactNode</td><td>&#x27;---&#x27;</td></tr></tbody></table><h3 id="DirectoryTree-props"><span>DirectoryTree props</span><a href="#DirectoryTree-props" class="anchor">#</a></h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>expandAction</td><td>目录展开逻辑，可选 <code>false</code> <code>&#x27;click&#x27;</code> <code>&#x27;doubleClick&#x27;</code></td><td>string</td><td>click</td></tr></tbody></table><h2 id="注意"><span>注意</span><a href="#注意" class="anchor">#</a></h2><p>在 <code>3.4.0</code> 之前：
树节点可以有很多，但在设置<code>checkable</code>时，将会花费更多的计算时间，因此我们缓存了一些计算结果（<code>this.treeNodesStates</code>）来复用，避免多次重复计算，以此提高性能。但这也带来了一些限制，当你异步加载树节点时，你需要这样渲染树：</p><pre class="language-jsx"><code><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>treeData<span class="token punctuation">.</span>length
  <span class="token operator">?</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Tree</span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>treeData<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>data <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TreeNode</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Tree</span><span class="token punctuation">></span></span>
  <span class="token punctuation">:</span> <span class="token string">'loading tree'</span><span class="token punctuation">}</span></code></pre></section></article></div></div><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-18 ant-col-lg-offset-6 ant-col-xl-19 ant-col-xl-offset-5 ant-col-xxl-20 ant-col-xxl-offset-4"><section class="prev-next-nav"><a class="prev-page" href="/components/timeline-cn/"><i class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i><span>Timeline</span><span class="chinese">时间轴</span><i class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a><a class="next-page" href="/components/alert-cn/"><i class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i><span>Alert</span><span class="chinese">警告提示</span><i class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></section></div></div></div><footer id="footer"><div class="footer-wrap"><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>相关资源</span></h2><div><a href="http://pro.ant.design">Ant Design Pro</a></div><div><a href="http://mobile.ant.design">Ant Design Mobile</a></div><div><a href="http://ng.ant.design">NG-ZORRO</a><span> - </span>Ant Design of Angular</div><div><a href="http://ng.mobile.ant.design">NG-ZORRO-MOBILE</a></div><div><a target="_blank " href="https://github.com/websemantics/awesome-ant-design"><span>Awesome Ant Design</span></a></div><div><span class="ant-badge"><a target="_blank" rel="noopener noreferrer" href="http://kitchen.alipay.com">Kitchen</a><span> - </span><span>Sketch 工具集</span><sup data-show="true" class="ant-scroll-number ant-badge-dot" style="right:-3px;margin-top:0"></sup></span></div><div><a href="http://scaffold.ant.design">Scaffolds</a><span> - </span><span>脚手架市场</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://umijs.org/">Umi</a> - <span>React 应用开发框架</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva">dva</a> - <span>数据流前端框架</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design">Ant Motion</a><span> - </span><span>设计动效</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/">Axure Library</a><span> - </span><span>Axure 部件库</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design">Ant UX</a><span> - </span><span>页面逻辑素材</span></div><div><a target="_blank " href="http://ant-design.gitee.io/"><span>国内镜像站点 🇨🇳</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>社区</span></h2><div><a target="_blank" rel="noopener noreferrer" href="http://zhuanlan.zhihu.com/antdesign"><span>知乎专栏</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://medium.com/ant-design/">Medium</a></div><div><a target="_blank" rel="noopener noreferrer" href="http://twitter.com/antdesignui">Twitter</a></div><div><a target="_blank" rel="noopener noreferrer" href="http://zhuanlan.zhihu.com/xtech"><span>体验科技专栏</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://seeconf.alipay.com/">SEE Conf</a><span> - </span><span>蚂蚁体验科技大会</span></div><div><a target="_blank " href="/docs/spec/work-with-us"><span>加入我们</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>帮助</span></h2><div><a target="_blank " href="https://github.com/ant-design/ant-design">GitHub</a></div><div><a href="/changelog"><span>更新记录</span></a></div><div><a target="_blank " href="https://www.yuque.com/ant-design/course"><span>Ant Design 实战教程</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="/docs/react/faq"><span>常见问题</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design"><span>在线讨论 (中文)</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english"><span>在线讨论 (English)</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/"><span>报告 Bug</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues"><span>讨论列表</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd"><span>StackOverflow</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd"><span>SegmentFault</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><img class="title-icon" src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg" alt="AFX Cloud"/><span>更多产品</span></h2><div><a target="_blank" rel="noopener noreferrer" href="https://yuque.com/"><span>语雀</span></a><span> - </span><span>知识创作与分享工具</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://yunfengdie.com/"><span>云凤蝶</span></a><span> - </span><span>移动建站平台</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/">AntV</a><span> - </span><span>数据可视化</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/">Egg</a><span> - </span><span>企业级 Node 开发框架</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://xcloud.alipay.com/"><span>蚂蚁体验云</span></a></div><div style="margin-top:20px"><div><div style="padding:4px;background:#fff;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.1);display:inline-block;cursor:pointer"><div style="width:80px;height:16px;border-radius:2px;background:#1890ff"></div></div></div></div></div></div></div></div><div class="bottom-bar">Made with <span class="heart">❤</span> by<a target="_blank" rel="noopener noreferrer" href="https://xtech.antfin.com"><span>AFX</span></a></div></footer></div>
    </div>
    <script src="/common.js"></script>
    <script src="/index.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-72788897-1"></script>
    <script>
    if (!location.port) {
      // Enable Google Analytics
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-72788897-1');
    }
    </script>
    <!-- Hotjar Tracking Code for ant.design -->
    <script>
    (function(h,o,t,j,a,r){
      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
      h._hjSettings={hjid:473408,hjsv:5};
      a=o.getElementsByTagName('head')[0];
      r=o.createElement('script');r.async=1;
      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
      a.appendChild(r);
    })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
    </script>
  </body>
</html>
